import React, { useState } from 'react';
import { Modal, message } from 'antd';
import type { ProColumns } from '@ant-design/pro-components';
import { DragSortTable } from '@ant-design/pro-components';
// import { Student } from '../../../service/student';

interface ColumnSettingModalProps {
  open: boolean;
  onCancel: () => void;
  onOk: (columns: any[]) => void;
  columns: any[];
}

const ColumnSettingModal: React.FC<ColumnSettingModalProps> = ({
  open,
  onCancel,
  onOk,
  columns,
}) => {
  const dragColumns: ProColumns[] = columns.map((col, index) => ({
    title: col.title,
    dataIndex: col.dataIndex,
    key: col.dataIndex || col.key || String(index),
    width: col.width,
    className: 'drag-visible',
    disable: col.key === 'action',
  }));

  const [dataSource, setDataSource] = useState(
    dragColumns.map((col, index) => ({
      key: col.dataIndex || col.key || String(index),
      title: col.title,
      dataIndex: col.dataIndex,
      sort: index,
      disable: col.disable,
      visible: true,
    }))
  );

  const handleDragSortEnd = (
    // beforeIndex: number,
    // afterIndex: number,
    newDataSource: any,
  ) => {
    console.log('排序后的数据', newDataSource);
    setDataSource(newDataSource);
    message.success('修改列表排序成功');
  };

  const handleOk = () => {
    // 根据排序后的结果重新构建列配置
    const newColumns = dataSource.map(item => {
      const originalCol = columns.find(col => 
        (col.dataIndex === item.dataIndex) || (col.key === item.key)
      );
      return {
        ...originalCol,
        visible: item.visible,
      };
    });
    
    onOk(newColumns);
  };

  const settingColumns: ProColumns[] = [
    {
      title: '排序',
      dataIndex: 'sort',
      width: 60,
      className: 'drag-visible',
    },
    {
      title: '列名',
      dataIndex: 'title',
      className: 'drag-visible',
    },
    {
      title: '显示',
      dataIndex: 'visible',
      valueType: 'switch',
      disable: true,
      render: (_, record) => {
        if (record.disable) {
          return <span>必显</span>;
        }
        return (
          <input
            type="checkbox"
            checked={record.visible}
            onChange={(e) => {
              const newDataSource = [...dataSource];
              const target = newDataSource.find(item => item.key === record.key);
              if (target) {
                target.visible = e.target.checked;
                setDataSource(newDataSource);
              }
            }}
          />
        );
      },
    },
  ];

  return (
    <Modal
      title="列设置"
      open={open}
      onOk={handleOk}
      onCancel={onCancel}
      width={600}
      destroyOnClose
    >
      <DragSortTable
        headerTitle="拖拽调整列顺序"
        columns={settingColumns}
        rowKey="key"
        search={false}
        pagination={false}
        dataSource={dataSource}
        dragSortKey="sort"
        onDragSortEnd={handleDragSortEnd}
      />
    </Modal>
  );
};

export default ColumnSettingModal;